<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>3D旋转魔方</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            background-size: cover;
            background-image: url();
        }
        * {
            user-select: none;
        }
        #content {
            position: fixed;
            width: 10em;
            height: 10em;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            font-size: 10px;
            font-size: calc(var(--scale) * 1px);
            transform-style: preserve-3d;
            transform: perspective(80em) rotateX(calc(var(--x) * 1deg)) rotateY(calc(var(--y) * 1deg));
        }
        #content > div {
            position: absolute;
            width: calc(var(--inset) * 100%);
            height: calc(var(--inset) * 100%);
            top: calc((1 - var(--inset)) * 0.5 * 100%);
            left: calc((1 - var(--inset)) * 0.5 * 100%);
            background-size: cover;
            background-position: center;
            opacity: 0.9;
        }
        #content > div:nth-child(n+7) {
            position: absolute;
            width: calc(var(--outset) * 100%);
            height: calc(var(--outset) * 100%);
            top: calc((1 - var(--outset)) * 0.5 * 100%);
            left: calc((1 - var(--outset)) * 0.5 * 100%);
            background-color: #fff;
            box-shadow: 0 0 1em #fff;
            opacity: 0.3;
        }
        #content > div:nth-child(1) {
            transform: translateZ(calc(var(--inset) * 0.5 * 10em));
        }
        #content > div:nth-child(2) {
            transform: translateX(calc(var(--inset) * 0.5 * 10em)) rotateY(90deg);
        }
        #content > div:nth-child(3) {
            transform: translateZ(calc(var(--inset) * 0.5 * -10em)) rotateY(180deg);
        }
        #content > div:nth-child(4) {
            transform: translateX(calc(var(--inset) * 0.5 * -10em)) rotateY(-90deg);
        }
        #content > div:nth-child(5) {
            transform: translateY(calc(var(--inset) * 0.5 * -10em)) rotateX(90deg);
        }
        #content > div:nth-child(6) {
            transform: translateY(calc(var(--inset) * 0.5 * 10em)) rotateX(90deg);
        }
        #content > div:nth-child(7) {
            transform: translateZ(calc((var(--outset) + (var(--outset) * 10 - 10 ) / 5) * 0.5 * 10em));
        }
        #content > div:nth-child(8) {
            transform: translateX(calc((var(--outset) + (var(--outset) * 10 - 10 ) / 5) * 0.5 * 10em)) rotateY(90deg);
        }
        #content > div:nth-child(9) {
            transform: translateZ(calc((var(--outset) + (var(--outset) * 10 - 10 ) / 5) * 0.5 * -10em)) rotateY(180deg);
        }
        #content > div:nth-child(10) {
            transform: translateX(calc((var(--outset) + (var(--outset) * 10 - 10 ) / 5) * 0.5 * -10em)) rotateY(-90deg);
        }
        #content > div:nth-child(11) {
            transform: translateY(calc((var(--outset) + (var(--outset) * 10 - 10 ) / 5) * 0.5 * -10em)) rotateX(90deg);
        }
        #content > div:nth-child(12) {
            transform: translateY(calc((var(--outset) + (var(--outset) * 10 - 10 ) / 5) * 0.5 * 10em)) rotateX(90deg);
        }



    </style>
    <style>
        body:active #content, body:active #content > div {
            animation-play-state: paused;
        }
        #content {
            --scale: 12;
            --inset: 0.4;
            --outset: 1;
            --x: 0;
            --y: 0;
            --time: 10s;
            --insetMax: 1.2;
            --outsetMax: 2.5;
            animation: motion-dir var(--time) linear infinite;
        }
        #content > div:nth-child(1) {
            animation: motion-inset var(--time) ease-in-out infinite alternate, motion-inset-1 var(--time) ease-in-out infinite alternate;
        }
        #content > div:nth-child(2) {
            animation: motion-inset var(--time) ease-in-out infinite alternate, motion-inset-2 var(--time) ease-in-out infinite alternate;
        }
        #content > div:nth-child(3) {
            animation: motion-inset var(--time) ease-in-out infinite alternate, motion-inset-3 var(--time) ease-in-out infinite alternate;
        }
        #content > div:nth-child(4) {
            animation: motion-inset var(--time) ease-in-out infinite alternate, motion-inset-4 var(--time) ease-in-out infinite alternate;
        }
        #content > div:nth-child(5) {
            animation: motion-inset var(--time) ease-in-out infinite alternate, motion-inset-5 var(--time) ease-in-out infinite alternate;
        }
        #content > div:nth-child(6) {
            animation: motion-inset var(--time) ease-in-out infinite alternate, motion-inset-6 var(--time) ease-in-out infinite alternate;
        }
        #content > div:nth-child(7) {
            animation: motion-outset var(--time) ease-in-out infinite alternate, motion-outset-1 var(--time) ease-in-out infinite alternate;
        }
        #content > div:nth-child(8) {
            animation: motion-outset var(--time) ease-in-out infinite alternate, motion-outset-2 var(--time) ease-in-out infinite alternate;
        }
        #content > div:nth-child(9) {
            animation: motion-outset var(--time) ease-in-out infinite alternate, motion-outset-3 var(--time) ease-in-out infinite alternate;
        }
        #content > div:nth-child(10) {
            animation: motion-outset var(--time) ease-in-out infinite alternate, motion-outset-4 var(--time) ease-in-out infinite alternate;
        }
        #content > div:nth-child(11) {
            animation: motion-outset var(--time) ease-in-out infinite alternate, motion-outset-5 var(--time) ease-in-out infinite alternate;
        }
        #content > div:nth-child(12) {
            animation: motion-outset var(--time) ease-in-out infinite alternate, motion-outset-6 var(--time) ease-in-out infinite alternate;
        }

        @keyframes motion-dir {
            to { transform: perspective(80em) rotateX(calc(var(--x) * 1deg + 360deg)) rotateY(calc(var(--y) * 1deg + 360deg)); }
        }
        @keyframes motion-inset {
            to {
                width: calc(var(--insetMax) * 100%);
                height: calc(var(--insetMax) * 100%);
                top: calc((1 - var(--insetMax)) * 0.5 * 100%);
                left: calc((1 - var(--insetMax)) * 0.5 * 100%);
            }
        }
        @keyframes motion-outset {
            to {
                width: calc(var(--outsetMax) * 100%);
                height: calc(var(--outsetMax) * 100%);
                top: calc((1 - var(--outsetMax)) * 0.5 * 100%);
                left: calc((1 - var(--outsetMax)) * 0.5 * 100%);
            }
        }
        @keyframes motion-inset-1 {
            to {
                transform: translateZ(calc(var(--insetMax) * 0.5 * 10em));
            }
        }
        @keyframes motion-inset-2 {
            to {
                transform: translateX(calc(var(--insetMax) * 0.5 * 10em)) rotateY(90deg);
            }
        }
        @keyframes motion-inset-3 {
            to {
                transform: translateZ(calc(var(--insetMax) * 0.5 * -10em)) rotateY(180deg);
            }
        }
        @keyframes motion-inset-4 {
            to {
                transform: translateX(calc(var(--insetMax) * 0.5 * -10em)) rotateY(-90deg);
            }
        }
        @keyframes motion-inset-5 {
            to {
                transform: translateY(calc(var(--insetMax) * 0.5 * -10em)) rotateX(90deg);
            }
        }
        @keyframes motion-inset-6 {
            to {
                transform: translateY(calc(var(--insetMax) * 0.5 * 10em)) rotateX(90deg);
            }
        }
        @keyframes motion-outset-1 {
            to {
                transform: translateZ(calc((var(--outsetMax) + (var(--outsetMax) * 10 - 10 ) / 5) * 0.5 * 10em));
            }
        }
        @keyframes motion-outset-2 {
            to {
                transform: translateX(calc((var(--outsetMax) + (var(--outsetMax) * 10 - 10 ) / 5) * 0.5 * 10em)) rotateY(90deg);
            }
        }
        @keyframes motion-outset-3 {
            to {
                transform: translateZ(calc((var(--outsetMax) + (var(--outsetMax) * 10 - 10 ) / 5) * 0.5 * -10em)) rotateY(180deg);
            }
        }
        @keyframes motion-outset-4 {
            to {
                transform: translateX(calc((var(--outsetMax) + (var(--outsetMax) * 10 - 10 ) / 5) * 0.5 * -10em)) rotateY(-90deg);
            }
        }
        @keyframes motion-outset-5 {
            to {
                transform: translateY(calc((var(--outsetMax) + (var(--outsetMax) * 10 - 10 ) / 5) * 0.5 * -10em)) rotateX(90deg);
            }
        }
        @keyframes motion-outset-6 {
            to {
                transform: translateY(calc((var(--outsetMax) + (var(--outsetMax) * 10 - 10 ) / 5) * 0.5 * 10em)) rotateX(90deg);
            }
        }
    </style>
</head>
<body>
    <div id="content">
        <!-- inset -->
        <div style="background-image: url();"></div>
        <div style="background-image: url();"></div>
        <div style="background-image: url();"></div>
        <div style="background-image: url();"></div>
        <div style="background-image: url();"></div>
        <div style="background-image: url();"></div>
        <!-- outset -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <script>
        (function () {
            var box = document.getElementById("content"),
                x = Number(window.getComputedStyle(box).getPropertyValue("--x")) || 0,
                y = Number(window.getComputedStyle(box).getPropertyValue("--y")) || 0;
            document.onmousedown = function (e) {
                e = e || event;
                var disX = e.clientX - y,
                    disY = e.clientY - x;
                document.onmousemove = function (e) {
                    e = e || event,
                    x = e.clientY - disY,
                    y = e.clientX - disX;
                    box.style.cssText += "--x:" + x + ";--y:" + y;
                };
                document.onmouseup = function() {
                    document.onmousemove = null,
                    document.onmouseup = null;
                };
            };
            document.onwheel = function (e) {
                e = e || event;
                var w = e.wheelDelta || e.wheelDeltaY || e.deltaY,
                    s = window.getComputedStyle(box).getPropertyValue("--scale"),
                    boxImg = box.querySelectorAll("div");
                s = s != void 0 ? Number(s) : 15;
                box.style.cssText += "--scale:" + (w > 0 ? s + 1 : (s - 1 < 1 ? 1 : s - 1));
                boxImg.forEach(function (e) { e.style.animationPlayState = "paused" });
                setTimeout(function () {
                    boxImg.forEach(function (e) { e.style.animationPlayState = "" });
                }, 0);
            };
        })();
    </script>
</body>
</html>